<script setup lang="ts">
import {DndProvider} from "vue3-dnd";
import {HTML5Backend} from "react-dnd-html5-backend";

interface Props {
  data: any[],
}

const emits = defineEmits(['change']);
const props = withDefaults(defineProps<Props>(), {
  data: [],
})
const handleMove = (dragIndex: number, hoverIndex: number) => {
  const item = items.value[dragIndex]
  items.value.splice(dragIndex, 1)
  items.value.splice(hoverIndex, 0, item)
  emits('change', items.value)
}
const items = ref(props.data)
</script>
<template>
  <div class="reorderable-list">
    <dnd-provider :backend="HTML5Backend">
      <reorderable-item
          v-for="(item, index) in items"
          :id="item.id"
          :key="item.id"
          :index="index"
          :move-item="handleMove"
      >
        <slot name="item" :item="item" :index="index">
          {{ item }}
        </slot>
      </reorderable-item>
    </dnd-provider>
  </div>
</template>
<style scoped>
</style>
